<template>
    <div>
        <div class="box">
            <el-container>
                <el-header>
                    <el-menu class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="1" class="shopType">
                            商品分类
                            <ul class="typeList">
                                <li v-for="item, index in list" :key="index">
                                    <span class="typeName" @mouseenter="handleMouseEnter(item.typeName)">{{
                                        item.typeName }}</span>
                                    <div class="typeDetail">
                                        <div class="typeBox">
                                            <dl v-for="item, index in shopList" :key="index">
                                                <dt>{{ item.name }}<i class="vipFont">></i></dt>
                                                <dd>
                                                    <span class="ddName" v-for="item1, index1 in item.list"
                                                        :key="index1">{{ item1 }}</span>
                                                </dd>
                                            </dl>
                                        </div>
                                        <div class="imgBox">
                                            <div class="typeImg">
                                                <div class="title">品牌推荐</div>
                                                <div v-for="item, index in imgList" :key="index" class="typeImgBox">
                                                    <img :src="item.url" alt="">
                                                    <span>{{ item.txt }}</span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <router-link to="/index/recommend">推荐</router-link>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <router-link to="/index/homeTextil">家纺</router-link>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <router-link to="/index/weipin">唯品新品</router-link>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <router-link to="/index/luxury">奢品</router-link>
                        </el-menu-item>
                        <el-menu-item index="6">
                            <router-link to="/index/women">女装</router-link>
                        </el-menu-item>
                        <el-menu-item index="7">
                            <router-link to="/index/shoeBag">鞋包</router-link>
                        </el-menu-item>
                        <el-menu-item index="8">
                            <router-link to="/index/electric">电器</router-link>
                        </el-menu-item>
                        <el-menu-item index="9">
                            <router-link to="/index/accessory">首饰</router-link>
                        </el-menu-item>
                        <el-menu-item index="10">
                            <router-link to="/index/food">食品</router-link>
                        </el-menu-item>
                        <el-menu-item index="11">
                            <router-link to="/index/motherBaby">母婴</router-link>
                        </el-menu-item>
                        <el-menu-item index="12">
                            <router-link to="/index/BeautyMakeup">美妆</router-link>
                        </el-menu-item>
                        <el-menu-item index="13">
                            <router-link to="/index/manWear">男装</router-link>
                        </el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">更多</template>
                            <el-menu-item index="2-1">内衣</el-menu-item>
                            <el-menu-item index="2-2">3折疯抢</el-menu-item>
                            <el-menu-item index="2-3">百货</el-menu-item>
                            <el-menu-item index="2-4">活动</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-header>
                <el-main>
                </el-main>
            </el-container>
            <product></product>
        </div>
      <div class="swiper">
            <div class="swiperBg">
                <div class="swiperBox">
                    <div class="swiperImg">
                        <el-carousel height="400px">
                            <el-carousel-item v-for="item, index in imgList" :key="index">
                                <img :src="item" alt="">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </div>
    </div>

    </div>
</template>
    <script>
    import { getData } from "@/request/api/all.js"
    import product from "@/components/product.vue"
    export default ({
        components: {
            product
        },
        data() {
            return {
                list: [],
                shopList: [],
                imgList: [],
                imgLists: ['https://b.appsimg.com/upload/momin/2024/11/26/34/1732617058960.jpg']
            }
        },
        methods: {
            async getData() {
                let res = await getData('/getList')
                console.log(res.data.data[0].product);
                this.list = res.data.data[0].product
            },
            handleMouseEnter(name) {
                this.shopList = this.list.find(item => {
                    return item.typeName == name
                }).shopList
                this.imgList = this.list.find(item => {
                    return item.typeName == name
                }).imgList
                console.log("imgList", this.imgList);
            },

        },
        mounted() {
            this.getData()
        }
    })
</script>

    <style lang="scss">
    * {
        padding: 0;
        margin: 0;
    }

    li,
    ul {
        list-style: none;
    }

    .box {
        width: 1000px;
        margin: 0 auto;

        .el-menu {
            z-index: 100;
        }

        .shopType {
            background: #f10180;
            width: 156px;
            margin-right: 20px;
            color: #fff !important;
            position: relative;

            .typeList {
                color: #000;
                background: #f10180;
                width: 156px;
                margin-left: -10px;
                height: 0;
                // position: relative;
                overflow: hidden;

                li {
                    .typeName {
                        width: 100%;
                        display: block;
                        height: 45px;
                        left: 45px;
                        color: #fff;
                        font-size: 12px;
                    }

                    .typeDetail {
                        display: none;
                        width: 844px;
                        height: 495px;
                        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1);
                        background: #fff;

                        .typeBox {
                            float: left;
                            width: 588px;
                            padding: 16px 40px 16px 40px;
                            max-height: 462px;
                            border-top: 1px solid #eee;
                            font-size: 12px;
                            white-space: wrap;
                            overflow-y: scroll;

                            dl {
                                position: relative;
                                margin-bottom: 24px;

                                dt {
                                    i {
                                        display: inline-block;
                                        width: 10px;
                                        vertical-align: middle;
                                        float: right;
                                        font-size: 12px;
                                        color: #000;
                                    }

                                    line-height: 22px;
                                    width: 88px;
                                    position: absolute;
                                    left: 0;
                                    font-weight: bold;
                                    text-align: left;
                                }

                                dd {
                                    line-height: 22px;
                                    width: 425px;
                                    // white-space: wrap;
                                    word-break: break-all;
                                    margin-left: 98px;
                                    text-align: left;

                                    .ddName {
                                        margin-right: 10px;
                                        color: #777;
                                    }

                                    .ddName:hover {
                                        color: #f10180;
                                    }
                                }
                            }
                        }

                        .imgBox {
                            float: right;
                            background-color: #f5f5f5;
                            width: 255px;
                            height: 463px;
                            padding: 16px;
                            display: inline-block;
                            // box-sizing: border-box;

                            .typeImg {
                                width: 100%;
                                // height: 100%;
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: space-evenly;

                                .title {
                                    width: 100%;
                                    font-size: 12px;
                                    color: #222;
                                    line-height: 21px;
                                    margin-bottom: 28px;
                                }

                                .typeImgBox {
                                    width: 68px;
                                    height: 68px;
                                    display: inline-block;
                                    background: #fff;
                                    margin-top: -12px;
                                    position: relative;
                                    border: 1px solid #fff;
                                    margin-bottom: 18px;

                                    img {
                                        height: 24px;
                                        width: 48px;
                                        top: 16px;
                                        position: absolute;
                                        left: 10px;
                                    }

                                    span {
                                        display: inline-block;
                                        position: absolute;
                                        bottom: -5px;
                                        font-size: 12px;
                                        text-align: center;
                                        width: 100%;
                                        left: 0;
                                    }
                                }

                                .typeImgBox:hover {
                                    border-color: #f10180;
                                }
                            }
                        }
                    }

                }

                li:hover .typeName {
                    background: #fff;
                    color: #f10180;
                }
            }

            .typeList:hover .typeDetail {
                display: block;
                position: absolute;
                top: 43px;
                left: 156px;
            }
        }

        .el-menu-item {
            padding: 0 10px;
            height: 43px !important;
            line-height: 43px;
            font-size: 16px;
            color: #000;
        }

        .el-menu-item:hover {
            color: #f10180 !important;
        }

        .shopType:hover {
            background: #f10180 !important;
            color: #fff !important;
        }

        .shopType:hover .typeList {
            height: 495px;
            transition: 0.5s;
        }

        .el-submenu {
            height: 43px;

            .el-submenu__title {
                height: 43px;
                line-height: 43px;
                font-size: 16px;
                color: #000;
            }
        }

        .el-header {
            padding: 0;

            .el-menu-demo {
                width: 1000px;
            }
        }
    }

    .el-menu--popup {
        min-width: 60px !important;
    }

    HEAD .el-main {
        padding-top: 0 !important;
    }

    .swiper {
        background: url('https://b.appsimg.com/upload/momin/2024/09/14/107/1726308250750.jpg');
        position: absolute;
        width: 1520px;
        top: 231px;
        // padding-bottom: 300px;
        z-index: 12;

        .swiperBg {
            padding-top: 30px;
            padding-bottom: 20px;
            position: relative;
            height: 392px;
            margin-bottom: 10px;

            .swiperBox {
                .swiperImg {
                    padding: 12px;
                    background: rgba(255, 255, 255, .86);
                    margin: 0 auto;
                    box-shadow: 0 1px 3px rgba(167, 167, 167, .4);
                    width: 1176px;

                    .el-carousel {
                        width: 1146px;
                        margin: 0 auto;
                    }
                }
            }
        }
    }

    .el-main {
        padding: 0 !important;
    }

</style>